$(function () {
    function getCategorytList() {
        $.get("/admin/category/list", function (res) {
            const list = res.data;
            const html = template('trTpl', { list })
            $('.category_table tbody').html(html)
        })
    }
    getCategorytList();

    //新增文章类别保存按钮点击事件
    $('.btn_opt_add').click(function () {
        console.log(1);
        // 获取保存内容
        const name = $('[name="name"]').val().trim();
        const slug = $('[name="slug"]').val().trim();
        if (!name || !slug) {
            layer.msg('内容不能为空', function () {
                //do something
            });
            return
        }

        // 发送增加请求
        $.post('/admin/category/add', { name, slug }, function () {

            //添加成功弹出层提醒
            layer.msg('新增成功');
            // 点击保存模态框隐藏
            $('#myModal').modal('hide');
            //内容清空
            $('[name="name"]').val('');
            $('[name="slug"]').val('');
            // 保存成功渲染页面
            getCategorytList();
        })
    })

    //在table下找.edit添加点击事件  this就是每个编辑按钮
    $('.category_table').on('click', '.edit', function () {
        //点击按钮显示模态框
        $("#editModal").modal("show");
        const item = $(this).data("item");
        //data("item")是一个编辑内容对象,内部含有name  slug
        console.log(item);
        //name输入框的value值填写为item(对象)内部的name值
        $('#name').val(item.name);
        //slug输入框的value值填写为item(对象)内部的slug值
        $('#slug').val(item.slug);

        //增加每个要编辑一个id
        $("#editModal").data("id", item.id);
    })
    //  编辑模态框-保存 
    $(".btn_opt_edit").click(function () {
        // 获取表单的内容
        const params = {
            name: $("#name").val(),
            slug: $("#slug").val(),
            id: $("#editModal").data("id")
        };

        // 发送请求 完成 编辑
        $.post("/admin/category/edit", params, function (res) {
            layer.msg('编辑成功');
            // 清空表单
            $("#name").val("");
            $("#slug").val("");
            $("#editModal").data("");
            // 关闭 编辑 模态框
            $("#editModal").modal("hide");
            //渲染最新数据
            getCategorytList();
        })
    })

    // 删除
    $('.category_table').on('click', '.delete', function () {
        // 保存this
        const that = this
        // 删除询问
        layer.confirm('是否要删除', { icon: 3, title: '提示' }, function (index) {
            //do something
            // 查找当前id
            const id = $(that).data('id');

            // 发送删除命令post 网址接口  id  回调函数
            $.post('/admin/category/delete', { id }, function (res) {
                console.log(res);

                getCategorytList();
                layer.close(index);
            })
        });
    })
    // 删除第二种写法
    // $('.category_table').on('click', '.delete', function () {
    // 查找当前id
    //         const id = $(this).data('id');
    //     // 删除询问
    //     layer.confirm('是否要删除', { icon: 3, title: '提示' }, function (index) {
    //         //do something
    //         // 发送删除命令post 网址接口  id  回调函数
    //         $.post('/admin/category/delete', { id }, function (res) {
    //             console.log(res);
    //             getCategorytList();
    //             layer.close(index);
    //         })
    //     });
    // })


    // 1 发送请求 显示文章分类数据渲染页面
    getCategorytList();
})